<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
	<title>Aplicacion con RichFaces</title>
</h:head>
<h:body>
	<h:outputStylesheet library="css" name="application.css" target="head" />
	<f:view>
		<div align="center">
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="a4j:ajax" />
				</f:facet>
				<h:form>
					<h:panelGrid columns="2">
						<h:inputText id="myinput" value="#{AjaxBean.name}">
							<a4j:ajax event="keyup" render="outtext" />
						</h:inputText>
						<a4j:outputPanel>
							<h:outputText id="outtext" value="#{AjaxBean.name}" />
						</a4j:outputPanel>
					</h:panelGrid>
				</h:form>
				<h:form>
					<h:panelGrid columns="2" id="panelPelicula" bgcolor="#EEEEEE">
						<h:outputText value="Director:" />
						<h:selectOneMenu id="dir" value="#{ExecuteBean.selectedDirector}">
							<f:selectItem itemLabel="- Seleccione -" noSelectionOption="true" />
							<f:selectItems value="#{ExecuteBean.listDirectors}" />
							<a4j:ajax event="change" execute="@form" render="menuMovie" />
						</h:selectOneMenu>
						<h:outputText value="Movie:" />
						<h:selectOneMenu id="menuMovie"
							value="#{ExecuteBean.selectedMovie}">
							<f:selectItems value="#{ExecuteBean.listMovies}" />
						</h:selectOneMenu>
						<h:messages />
					</h:panelGrid>
				</h:form>
			</rich:panel>
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="a4j:param" />
				</f:facet>
				<h:form>
					<a4j:commandButton value="Set name to Alex" render="rep">
						<a4j:param name="username" value="Alex"
							assignTo="#{AjaxBean.name}" />
					</a4j:commandButton>
				</h:form>
				<h:outputText id="rep" value="Name: #{AjaxBean.name}" />
			</rich:panel>
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="Passing client-side parameters" />
				</f:facet>
				<h:form>
					<a4j:commandButton value="Show Screen Size" render="infoPanel">
						<a4j:param name="w" value="screen.width"
							assignTo="#{AjaxBean.screenWidth}" noEscape="true" />
						<a4j:param name="h" value="screen.height"
							assignTo="#{AjaxBean.screenHeight}" noEscape="true" />
					</a4j:commandButton>
					<h:panelGrid columns="2" id="infoPanel">
						<h:outputText value="Width:" />
						<h:outputText value="#{AjaxBean.screenWidth}" />
						<h:outputText value="Height:" />
						<h:outputText value="#{AjaxBean.screenHeight}" />
					</h:panelGrid>
				</h:form>
			</rich:panel>
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="a4j:actionListener" />
				</f:facet>
				<h:form>
					<h:inputText value="#{AjaxBean.name}" />
					<a4j:commandButton id="cmdCount" execute="@form" render="outCount">
						<a4j:actionListener listener="#{AjaxBean.countChars}" />
					</a4j:commandButton>
					<h:outputFormat id="outCount" value="Number of characters: {0}">
						<f:param value="#{AjaxBean.count}" />
					</h:outputFormat>
				</h:form>
			</rich:panel>
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="commandLink" />
				</f:facet>
				<h:form>
					<h:inputText value="#{AjaxBean.link}" />
					<br />
					<a4j:commandLink value="#{AjaxBean.link}" execute="@form"
						render="@this" />
				</h:form>
			</rich:panel>
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="a4j:jsFunction" />
				</f:facet>
				<table border="1">
					<tbody>
						<tr>
							<td><span onmouseover="updateName('Kate')"
								onmouseout="updateName('')">Kate</span></td>
							<td><span onmouseover="updateName('John')"
								onmouseout="updateName('')">John</span></td>
							<td><span onmouseover="updateName('Alex')"
								onmouseout="updateName('')">Alex</span></td>
						</tr>
						<tr>
							<td colspan="3">Name: <b><h:outputText id="showname"
										value="#{AjaxBean.text}" /></b>
							</td>
						</tr>
					</tbody>
				</table>
				<h:form>
					<a4j:jsFunction name="updateName" render="showname">
						<a4j:param name="name" assignTo="#{AjaxBean.text}" />
					</a4j:jsFunction>
				</h:form>
			</rich:panel>
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="a4j:poll" />
				</f:facet>
				<h:form>
					<a4j:poll action="#{AjaxBean.addSecond}" 
						render="outSeconds" 
						interval="1000"/>
				</h:form>
				<h:outputText id="outSeconds"
					value="You've been here #{AjaxBean.seconds} seconds" />
			</rich:panel>
		</div>
	</f:view>
</h:body>
</html>